<!--
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-11-06 19:18:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /-/src/pages/consultant.vue
 -->

<template>
	<view class="consultant-page">
		<view class="product-classify">
			<view class="classify">
				<view  v-for="(item,index) in tag" :key="index" class='item' :data-id="item.id" :data-type="item.tagName" @click="chooseTag">
					<view class="pic">
						<image
							:src="item.img"
							mode="scaleToFill"
							lazy-load="false">
						</image>
					</view>
					<view class="text">{{item.tagName}}</view>
				</view>
			</view>
		
		</view>
		<view class="persons-list">
			<view class="product-persons" v-for="(item,index) in personList" :key="index" :data-id="item.id" @click="navigateUrl">
				<PersonInfo :PersonInfo="item" :type="personType"/>
			</view>
		</view>
		<noData v-if="personList.length==0&&flag"/>
		 <uni-load-more v-if="personList.length>=4" :loadingType="loadingType"></uni-load-more>
	</view>
</template>

<script>
import Vue from 'vue'
import PersonInfo from "@/components/personInfo/personInfo.vue";
import InterServer from "@/common/config/server";
import noData from '@/components/noData/noData';
import {localStorageSyncServer} from "@/common/js/common"
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
export default {
	components:{
		PersonInfo,
		noData,
		uniLoadMore
	},
	data() {
		return {
			tagActive:0,
			tag:[{
				img:"../static/images/con_module_1.png",
				tagName:"抵押服务",
				id:0
			},{
				img:"../static/images/con_module_2.png",
				tagName:"信用服务",
				id:1
			},{
				img:"../static/images/con_module_3.png",
				tagName:"极速服务",
				id:2
			},{
				img:"../static/images/con_module_4.png",
				tagName:"信用卡",
				id:3
			}],
			totalPage:0,
			flag:false,
			pageNum:0,
			pageSize:5,
			personList:[],
			type:"抵押服务",
			personType:1,
			loadingType:0, //加载类型0（loading前），1（loading中），2（没有更多了）
      		pageNumber:0,
			
		};
	},
	onShow(){
		// #ifdef H5
			document.title=`我的顾问`
		// #endif
		this.personList.length=0;
		this.listExpert()
	},
	 //上拉加载
  onReachBottom(){
   this.pageNum=this.pageNum+1;
    if(this.pageNumber+1<this.totalPage){
      this.loadingType=1
        this.listExpert() //获取顾问列表
    }else{
      this.loadingType=2
    }
  },
	methods: {
		//获取顾问列表
		listExpert(){
		  	Vue.showCustomLoading()
				InterServer.listExpert({
					"city": "",
					"enable": true,
					"expert": 1,
					"pageNum": this.pageNum,
					"pageSize":this.pageSize,
					"type": this.type
				}).then(res=>{
						if(res.code==200){
							this.personList=this.personList.concat(res.data.dataList)
							this.totalPage=res.data.totalPage;
							this.pageNumber=res.data.pageNumber;
							this.flag=res.data.dataList.length==0 ? true : false
							uni.hideLoading();
						}
				})
			},
	//标签切换
    chooseTag(e){  
		this.tagActive=e.currentTarget.dataset.id
		this.type=e.currentTarget.dataset.type
		this.pageNum=0;
		this.loadingType=0; 
		this.pageNumber=0;
		this.personList.length=0;
		this.listExpert()
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	  },
	//页面跳转
	 navigateUrl(e){
		   let id=e.currentTarget.dataset.id
		   let url=`./consultantDetails?type=service&id=${id}&recordType=1`
		   Vue.customNavigateTo(url);
		 },
    //页面跳转
    onLine(e) {
		  const id = e.currentTarget.dataset.id;
		  const uid = e.currentTarget.dataset.uid;
		  const image = e.currentTarget.dataset.image;
          InterServer.advisoryRecord({
			cid:id,
			type: 1 //0快捷电话 1图文咨询
		}).then(res => {
			localStorageSyncServer.set("herderRobotImg",image)
			Vue.customNavigateTo(`./chat?id=${uid}`);
		});
    },
    //电话咨询
    callPhone(e) {
		const phoneNumber = e.currentTarget.dataset.number;
		const id = e.currentTarget.dataset.id;
		 uni.makePhoneCall({
            phoneNumber: phoneNumber
        });
        this.advisoryRecord(id);
    },
	  //快捷电话和图文咨询记录
    advisoryRecord(id) {
        InterServer.advisoryRecord({
          cid:id,
          type: 0 //0快捷电话 1图文咨询
        }).then(res => {
          console.log(res);
        });
    },
}
}
</script>

<style lang="less" scoped>
.consultant-page {
	background: #ffffff;
	.product-classify {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		text-indent: 0;
		display: flex;
		z-index: 999;
		color: #303030;
		font-size: 30upx;
		background: #ffffff;
		padding: 0 30upx;
		height: 220upx;
		justify-content: space-between;
		align-items: center;
		background: url("../static/images/consultant-banner.jpeg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		.item {
			width: 150upx;
			text-align: center;
			text-align: center
		}
		
		.classify{
			position: absolute;
			left: 50%;
			margin-left: -351upx;
			top:77upx;
			width:702upx;
			height:176upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 4upx 6upx rgba(0,0,0,0.16);
			border-radius:20upx 20upx 0upx 0upx;
			display: flex;
			justify-content: space-between;
			padding: 0 70upx;
			box-sizing: border-box;
			align-items: center;

			.pic{
				height: 48upx;
				margin-bottom: 10upx;
				text-align: center;
				image{
					width: 48upx;
					height: 48upx;
				}
			}
			.text{
				height:33upx;
				font-size:24upx;
				font-family:PingFang-Semibold;
				font-weight:bold;
				line-height:33upx;
				color:rgba(124,124,124,1);
				text-align: center;
			}
		}
	}
	.persons-list{
		margin-top: 300upx;
		.product-persons{
			margin: 16upx 48upx;
			background: #ffffff;
			// border-radius: 10upx;
			// box-shadow: 0 0 20upx 5upx #f3f4f6;
			.person{
				&-item{
					display: flex;
					padding: 20upx 25upx;
					border-bottom: 2upx solid #f7f7f7;
				}
				&-header{
					margin-right: 25upx;
					image{
						width: 120upx;
						height: 150upx;
					}
				}
				&-info{
					font-size: 24upx;
				}
				&-job{
				   display: flex;
				   color: #333333;
				   font-weight: bold;
				   font-size: 30upx;
				   margin-top: 7upx;
				}
				&-name{
				   margin-right: 30upx
				}
				&-source{
				   background: #ffefee;
				   color: #f88481;
				   font-size: 24upx;
				   width: 100upx;
				   height: 35upx;
				   text-align: center;
				   line-height: 35upx;
				   border-radius: 5upx;
				   margin: 25upx 0 15upx;
				}
				&-skilled{
					background:#eff4ff;
					color:#6c99fb;
					width: 230upx;
					height: 35upx;
					text-align: center;
					line-height: 35upx;
					border-radius: 5upx;
					
				}
			}
			.contact{
			  &-info{
				display: flex;
				justify-content: space-between;
				align-items:center;
				padding: 15upx 30upx 15upx 25upx;
			  }
			  &-count{
				  font-size: 24upx;
				  color:#999999;
			  }
			}
			.consulta-method{
				display: flex;
				.consulta-btn{
					width: 150upx;
					font-size:26upx;
					font-weight: bold;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border-radius: 10upx;
				}
				.telephone{
					background: #ffffff;
					line-height: 56upx;
					border: 4upx solid #1b65fa;
					color: #1b65fa;
					margin-right: 30upx;
					
				}
				.on-line{
					background: #1b65fa;
					color:#ffffff;
				}
	
			}
		}
	}
}
</style>
